<template>
	<right-drawer title="统计图" :show="show">
		<div class="chart">
			<content>
				<content-title>在线人数走势图</content-title>
				<content-block>
					<canvas v-el:onlinechart style="background-color:#ffffff;"></canvas>
				</content-block>
				<content-title>弹幕&礼物走势图</content-title>
				<content-block>
					<canvas v-el:contrastchart style="background-color:#ffffff;"></canvas>
				</content-block>
				<content-title>礼物分布图</content-title>
				<content-block>
					<canvas v-el:giftchart style="background-color:#ffffff;"></canvas>
				</content-block>
			</content>
		</div>
	</right-drawer>
</template>
<script>
import Chart from 'chart.js/src/chart'
import rightDrawer from './rightDrawer'
import { isShowChart, getCharts } from '../../vuex/getters'
export default {
  vuex: {
    getters: {
       show: isShowChart,
       charts: getCharts
    }
  },
  ready () {
    Chart.defaults.global.fullWidth = true
  },
  attached () {
    setTimeout(this.init.bind(this), 100)
  },
  components: {
     rightDrawer 
  },
  methods: {
    init () {
      var onLineChart = new Chart(this.$els.onlinechart, this.charts.onLineChart)
      var contrastChart = new Chart(this.$els.contrastchart, this.charts.contrastChart)
      var giftChart = new Chart(this.$els.giftchart, this.charts.giftChart)
    }
  }
}
</script>

<style lang="less">
	.chart {
		height: 100%;
        width: 100%;
        overflow: auto;
        padding-bottom: 60px;
        background: #f1f1f1;
	}
	
	.chart .content-block,
	.chart .content-title {
		max-width: 1200px;
		margin: 0px auto;
	}
	
	.chart .content-title {
		padding: 20px 10px;
	}
</style>